<template>
	<view class="video-box">
		<video id="myVideo" v-if="isShow" :src="data.video.url" :autoplay="true" :page-gesture="true"
			:show-fullscreen-btn="false" class="video" :show-snapshot-button="true"></video>
		<!-- 	<uni-icons v-if="showCloseBtn" @click="close" size="34px" color="#FFFFFF" type="closeempty"
			class="close-icon"></uni-icons> -->
		<text v-if="showCloseBtn" class="close-text" @click="close">关闭</text>
		<canvas id="hiddenCanvas" type="2d" canvas-id="circleCanvas"></canvas>
		<!-- 		<image v-if="btnShow" src="/uni_modules/uni-im/static/screenshot.png" class="screenshot-icon" @click="snapshot">
		</image> -->
		<text v-if="btnShow" class="screenshot-text" @click="snapshot">截屏编辑</text>
		<text v-if="btnShow" class="send-text" @click="sendVideo">发送视频</text>

		<!-- 图片编辑 -->
		<imgEdit ref="imgEdit" @ok="saveImg" @close="isShow=true" />
	</view>
</template>

<script>
	import imgEdit from '@/components/image-edit/x-image-edit.vue'
	export default {
		components: {
			imgEdit
		},
		data() {
			return {
				btnShow: true,
				isShow: false,
				showCloseBtn: true,
				data: null
			};
		},
		onLoad(op) {
			this.data = JSON.parse(op.url)
			if (this.data.video.name) {
				this.btnShow = true
			} else {
				this.btnShow = false
			}
			this.isShow = true
		},
		methods: {
			close() {
				uni.navigateBack()
			},
			getVideoContext(id, instance) {
				const query = uni.createSelectorQuery().in(instance);
				const queryVideo = query.select(`#${id}`).context();
				return new Promise((resolve, reject) => {
					queryVideo.exec(res => {
						resolve(res);
					});
				});
			},
			snapshot() {
				uni.showLoading({
					title: '加载中...'
				})
				this.videoContext = uni.createVideoContext('myVideo'); //创建视频实例指向video
				this.videoContext.pause();
				setTimeout(() => {
					this.getCapture()
				}, 500)
			},
			getCapture() {
				let that = this
				let pages = getCurrentPages();
				let page = pages[pages.length - 1];
				let ws = page.$getAppWebview()
				var bitmap = new plus.nativeObj.Bitmap('test');
				// 将webview内容绘制到Bitmap对象中  
				ws.draw(bitmap, () => {
					// 将原生Bitmap转换成Base64字符串  
					let base64data = bitmap.toBase64Data()
					// console.log(base64data)
					bitmap.loadBase64Data(base64data, function() {
						// console.log("加载Base64图片数据成功");
						let url = '_downloads/four-faith_' + new Date().getTime() + '.jpg';
						bitmap.save(url, {}, function(fileinfo) {
							// console.log('保存图片成功：',fileinfo);
							that.saveImage(fileinfo.target)
							bitmap.clear();
						}, function(e) {
							onsole.log('保存图片失败：' + JSON.stringify(e));
							bitmap.clear();
						});
					}, function() {
						console.log('加载Base64图片数据失败：' + JSON.stringify(e));
						bitmap.clear();
					});
					this.videoContext = uni.createVideoContext('container'); //创建视频实例指向video
					this.videoContext.play();
				}, (e) => {
					console.log('截屏绘制图片失败：', e);
					uni.showToast({
						title: '抓拍失败',
						icon: 'none',
					})
				}, {
					check: true, // 设置为检测白屏
					// 设置截屏区域
					clip: {
						top: uni.getSystemInfoSync().statusBarHeight + 90,
						left: '0px',
						height: '90%',
						width: '100%'
					}
				});
			},
			saveImage(url) {
				let that = this
				uniCloud.uploadFile({
					filePath: url,
					cloudPath: 'a.jpg',
					success(res) {
						// console.log(res)
						uni.hideLoading()
						that.isShow = false
						that.$refs.imgEdit.open(res.fileID)
					},
					fail(res) {
						console.log(res)
					},
				});
			},
			saveImg(url) {
				// console.log(url)
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				let that = this
				uniCloud.uploadFile({
					filePath: url,
					cloudPath: 'a.jpg',
					success(res) {
						uni.setStorage({
							key: 'image',
							data: {
								StagingData: {
									'image': {
										url: res.fileID,
										size: that.data.video.size,
										name: that.data.video.name
									}
								},
								isImage: true
							},
							success: function() {
								console.log('success', '-----------image');
								that.$refs.imgEdit.close()
								uni.hideLoading()
								uni.navigateBack()
							}
						});
						// uni.setStorageSync('image', {
						// 	url: res.fileID,
						// 	isImage: true
						// })
						// uni.navigateBack()
						// that.StagingData.image.url = res.fileID
						// that.beforeSendMsg(that.StagingData)
					},
					fail() {},
				});
			},
			sendVideo() {
				uni.setStorage({
					key: 'video',
					data: {
						StagingData: this.data,
						isVideo: true
					},
					success: function() {
						console.log('success');
						uni.navigateBack()
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.video-box {
		width: 100vw;
		height: 100vh;
		background-color: #000;
	}

	.video {
		width: 100vw;
		height: 90vh;
	}

	// .close-icon {
	// 	position: fixed;
	// 	bottom: 40rpx;
	// 	right: 20%;
	// 	z-index: 8;
	// 	/* #ifndef APP-NVUE */
	// 	text-shadow: 0 0 15px black;
	// 	/* #endif */
	// }

	.send-text {
		width: 140rpx;
		height: 60rpx;
		position: fixed;
		bottom: 40rpx;
		left: 47%;
		z-index: 8;
		font-size: 32rpx;
		color: #fff;
	}

	.close-text {
		width: 80rpx;
		height: 60rpx;
		position: fixed;
		bottom: 40rpx;
		right: 15%;
		z-index: 8;
		font-size: 32rpx;
		color: #fff;
	}

	.screenshot-text {
		width: 140rpx;
		height: 60rpx;
		position: fixed;
		bottom: 40rpx;
		left: 20%;
		z-index: 8;
		font-size: 32rpx;
		color: #fff;
	}

	.send-text {
		width: 140rpx;
		height: 60rpx;
		position: fixed;
		bottom: 40rpx;
		left: 47%;
		z-index: 8;
		font-size: 32rpx;
		color: #fff;

	}

	#hiddenCanvas {
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: -1000px;
		left: -1000px;
		z-index: 9999;
	}
</style>